<template>
	<view class="container ">
		<view>
			<view class="row main">
				<view class="col goods-list">
					<view class="col goods-item" v-for="(item,index) in orderList" v-bind:key="index">
						<view class="row date-header">
							<view class="row date-header-main">
								<text :class="item.status!=1?'font-red':''">{{orderStatus[item.status]}}</text>
								<text class="date" v-if="item.status==1">{{item.end_time}}</text>
								<text class="new-message-tips auto-left" v-if="item.status!=1"></text>
							</view>
						</view>
						<view class="col">
							<view class="row goods-header">
								<image v-if="item.status!=3" :src="item.goods_info.goods_naming.member_avatar?item.goods_info.goods_naming.member_avatar:url+'/static/imgs/user-color.png'"></image>
								<image v-else :src="item.goods_info.goods_naming.member_avatar"></image>

								<view class="user-name">【{{item.goods_info.goods_naming.name?item.goods_info.goods_naming.name:'未冠名'}}】</view>
								<view class="goods-name">{{item.goods_info.name}}</view>
							</view>
							<view class="row goods-content">
								<image class="cover-image" :src="item.goods_info.image" mode="aspectFill"></image>
								<view class="col goods-content-main">
									<view class="description">
										<text v-if="item.goods_info.goods_naming.title">{{item.goods_info.goods_naming.title}}</text>
										<view v-else class="col status-none">
											<text>{{orderStatus[item.status]}}</text>
											<text>{{item.price}}元即可冠名。</text>
										</view>
									</view>
									<view class="row">
										<view class="price" v-if="item.goods_info.goods_naming.price">¥{{item.goods_info.goods_naming.price}}</view>
										<view class="row operate auto-left" v-if="item.status!=1">
											<view class="button button-active" @click="toNamingConfirm" :data-goods_id="item.goods_id">夺冠名</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="row paginate">
				<text>
					<block>{{config.show_loading?config.loading_msg:''}}</block>
					<block>{{config.show_finish?config.finish_msg:''}}</block>
					<!-- <block>{{config.show_empty?config.empty_msg:''}}</block> -->
				</text>
			</view>
		</view>
		<view class="col empty-view" v-if="config.show_empty">
			<image src="/static/imgs/naming_none.png"></image>
			<text class="empty-text">暂无冠名</text>
		</view>
	</view>
</template>
<script>
	var app = getApp();
	import http from "../../../../common/js/request.js";
	import common from "../../../../common/js/function.js";
	export default {
		data() {
			return {
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				orderList: [],
				orderStatus: {
					1: '冠名有效期至',
					2: '冠名已到期',
					3: '冠名被抢走'
				}
			}
		},
		onLoad() {
			var that = this;
			that._load();
		},
		methods: {
			_load() {
				var that = this;
				that.orderList = [];
				that._setConfig(() => {
					that.getOrderList();
				});
			},
			_setConfig(callback = '') {
				var that = this;
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			//获取我的冠名列表
			getOrderList() {
				var that = this;
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				http.post('/api/v1/goods/my_goods_naming_list', {
					page: current_page,
					store_id: that.store_id
				}, res => {
					that.orderList = that.orderList.concat(res.datas);
					that.config.show_loading = false; //关闭loading
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
				});
			},

			onReachBottom() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getOrderList();
			},
			onPullDownRefresh() {
				var that = this;
				setTimeout(() => {
					that._load();
					uni.stopPullDownRefresh();
				}, 500);
			},
			toNamingConfirm(e) {
				var that = this;
				uni.navigateTo({
					url: '/pages/store/naming/confirm/confirm?goods_id=' + e.currentTarget.dataset.goods_id,
				});
			}
		}
	}
</script>
<style>
	@import url("../../../../common/css/naming-goods-list.css");

	/* 缺省样式 */
	.empty-view {
		margin-top: 183rpx;
		align-items: center;
		justify-content: center;
	}

	.empty-view image {
		width: 395rpx;
		height: 262rpx;
	}

	.empty-view .empty-text {
		margin-top: 80rpx;
		color: #999;
		font-size: 32rpx;
	}

	.empty-view .empty-button {
		margin-top: 120rpx;
		width: 512rpx;
		height: 100rpx;
		background: rgba(255, 157, 17, 1);
		border-radius: 10rpx;
		font-size: 34rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 缺省样式 */
	.date-header {
		align-items: center;
		font-size: 24rpx;
		border-bottom: 1rpx solid #F1EFEF;
		height: 72rpx;
		padding: 0rpx 12rpx;
		color: #939393;
	}

	.font-red {
		color: #FF0000;
	}

	.goods-header {
		border: none;
	}

	.date-header-main {
		width: 100%;
		align-items: center;
	}

	.date-header-main .date {
		margin-left: 12rpx;
	}

	.new-message-tips {
		width: 15rpx;
		height: 15rpx;
		background: rgba(255, 0, 0, 1);
		border-radius: 50%;
	}
</style>
